<template>
  <div class="goods">
    <div class="nav">
      <div class="w">
        <a href="javascript:;" :class="{active:sortType===1}" @click="reset()">综合排序</a>
        <a href="javascript:;" @click="sortByPrice(1)" :class="{active:sortType===2}">价格从低到高</a>
        <a href="javascript:;" @click="sortByPrice(-1)" :class="{active:sortType===3}">价格从高到低</a>
        <div class="price-interval">
          <input type="number" class="input" placeholder="价格" v-model="min">
          <span style="margin: 0 5px"> - </span>
          <input type="number" placeholder="价格" v-model="max">
          <y-button text="确定" classStyle="main-btn" @btnClick="reset" style="margin-left: 10px;"></y-button>
        </div>
      </div>
    </div>

    <div v-loading="loading" element-loading-text="加载中..." style="min-height: 35vw;">
      <div class="img-item" v-if="!noResult">
        <!--商品-->
        <div class="goods-box w">
          <mall-goods v-for="(item,i) in goods" :key="i" :msg="item"></mall-goods>
        </div>

        <el-pagination
          v-if="!noResult&&!error"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 8, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div class="no-info" v-if="noResult">
        <div class="no-data">
          <img src="/static/images/no-search.png">
          <br> 抱歉！暂时还没有商品
        </div>
        <section class="section">
          <y-shelf :title="recommendPanel.name">
            <div slot="content" class="recommend">
              <mall-goods :msg="item" v-for="(item,i) in recommendPanel.panelContents" :key="i"></mall-goods>
            </div>
          </y-shelf>
        </section>
      </div>
      <div class="no-info" v-if="error">
        <div class="no-data">
          <img src="/static/images/error.png">
          <br> 抱歉！出错了...
        </div>
        <section class="section">
          <y-shelf :title="recommendPanel.name">
            <div slot="content" class="recommend">
              <mall-goods :msg="item" v-for="(item,i) in recommendPanel.panelContents" :key="i"></mall-goods>
            </div>
          </y-shelf>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import {getAllGoods} from '/api/goods.js'
import {recommend} from '/api/index.js'
import mallGoods from '/components/mallGoods'
import YButton from '/components/YButton'
import YShelf from '/components/shelf'

export default {
  data () {
    return {
      goods: [],
      noResult: false,
      error: false,
      min: '',
      max: '',
      loading: true,
      timer: null,
      sortType: 1,
      windowHeight: null,
      windowWidth: null,
      recommendPanel: [],
      sort: '',
      currentPage: 1,
      total: 0,
      pageSize: 4
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this._getAllGoods()
      this.loading = true
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this._getAllGoods()
      this.loading = true
    },
    _getAllGoods () {
        // let cid = this.$route.query.cid
      if (this.min !== '') {
        this.min = Math.floor(this.min)
      }
      if (this.max !== '') {
        this.max = Math.floor(this.max)
      }
      let params = {
        params: {
          size: this.pageSize,
          startRow: this.currentPage - 1
        }
      }
      getAllGoods(params).then(res => {
        if (res) {
          this.total = 8
          this.goods = res
          this.noResult = false
          if (this.total === 0) {
            this.noResult = true
          }
          this.error = false
        } else {
          this.error = true
        }
        this.loading = false
      })
    },
      // 默认排序
    reset () {
      this.sortType = 1
      this.sort = ''
      this.currentPage = 1
      this.loading = true
      this._getAllGoods()
    },
      // 价格排序
    sortByPrice (v) {
      var arr
      if (v === 1) {
        arr = this.quickSort(this.goods)
        this.goods = arr
      } else if (v === -1) {
        arr = this.quickSort(this.goods)
        this.goods = arr.reverse()
      }
    },
    quickSort (arr) {
      if (arr.length <= 1) return arr
      var arr1 = []
      var arr2 = []
      for (let i = 1; i < arr.length; i++) {
        if (arr[i].price < arr[0].price) {
          arr1.push(arr[i])
        } else {
          arr2.push(arr[i])
        }
      }
      arr1 = this.quickSort(arr1)
      arr2 = this.quickSort(arr2)
      arr1.push(arr[0])
      return arr1.concat(arr2)
    }
  },
  watch: {
    $route (to, from) {
      if (to.fullPath.indexOf('/goods?cid=') >= 0) {
        this.cId = to.query.cid
        this._getAllGoods()
      }
    }
  },
  created () {
  },
  mounted () {
    this.windowHeight = window.innerHeight
    this.windowWidth = window.innerWidth
    this._getAllGoods()
    recommend().then(res => {
      let data = res.result
      this.recommendPanel = data[0]
    })
  },
  components: {
    mallGoods,
    YButton,
    YShelf
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/style/mixin";
  @import "../../assets/style/theme";

  .nav {
    height: 60px;
    line-height: 60px;
    > div {
      display: flex;
      align-items: center;
      a {
        padding: 0 15px;
        height: 100%;
        @extend %block-center;
        font-size: 12px;
        color: #999;
        &.active {
          color: #5683EA;
        }
        &:hover {
          color: #5683EA;
        }
      }
      input {
        @include wh(80px, 30px);
        border: 1px solid #ccc;
      }
      input + input {
        margin-left: 10px;
      }
    }
    .price-interval {
      padding: 0 15px;
      @extend %block-center;
      input[type=number] {
        border: 1px solid #ccc;
        text-align: center;
        background: none;
        border-radius: 5px;
      }
    }
  }

  .goods-box {
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }

  .no-info {
    padding: 100px 0;
    text-align: center;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    .no-data{
      align-self: center;
    }
  }

  .img-item{
    display: flex;
    flex-direction: column;
  }

  .el-pagination{
    align-self: flex-end;
    margin: 3vw 10vw 2vw;
  }

  .section {
    padding-top: 8vw;
    margin-bottom: -5vw;
    width: 1218px;
    align-self: center;
  }

  .recommend {
    display: flex;
    > div {
      flex: 1;
      width: 25%;
    }
  }



</style>
